<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>日期与时间选择器 laydate - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>日期与时间选择器</h1>
<blockquote class="layui-elem-quote">
<p>日期与时间选择器 <code>laydate</code> 提供了年、月、日、时、分、秒的多类型选择面板，也是 Layui 的常用组件之一。</p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{hot: true, anchor: null}" style="margin-bottom: 0;">示例</h2>
<style>
.ws-demo-laydate .layui-form-label{width: 100px;}
.ws-demo-laydate .layui-form-item{margin-bottom: 0;}
.ws-demo-laydate .layui-form-item .layui-inline{margin-bottom: 11px;}
.ws-demo-laydate .layui-input-block{margin-left: 130px;}
.ws-demo-static .layui-inline{margin: 0 16px 16px 0;}
@media screen and (max-width: 450px){
  .layui-form-item .layui-input-inline{margin-left: 130px;}
}
</style>
<div class="ws-demo-laydate">
<h3 lay-toc="{level: 2, id: 'examples'}" class="layui-hide">常规用法</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '常规用法'}, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">中文版</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">国际版</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-demo-en" placeholder="yyyy-MM-dd">
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 渲染
  laydate.render({
    elem: '#ID-laydate-demo'
  });
  // 英文版
  laydate.render({
    elem: '#ID-laydate-demo-en',
    lang: 'en'
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-type" lay-toc="{level: 2, hot: true}">多类型选择器</h3>
<p>默认为日期选择器，即上文「常规用法」示例中的效果。以下主要呈现其他类型选择器：</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">年选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-year" placeholder="yyyy">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">年月选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-month" placeholder="yyyy-MM">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">时间选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-time" placeholder="HH:mm:ss">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期时间选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="yyyy-MM-dd HH:mm:ss">
      </div>
    </div>
  </div>
  <hr>
  <h5 style="margin-bottom: 16px;">
    同时显示日期和时间选择器（全面板） <sup>2.8+</sup> :
  </h5>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期时间选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-datetime-1" placeholder="yyyy-MM-dd HH:mm:ss">
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 年选择器
  laydate.render({
    elem: '#ID-laydate-type-year',
    type: 'year'
  });
  
  // 年月选择器
  laydate.render({
    elem: '#ID-laydate-type-month',
    type: 'month'
  });
  
  // 时间选择器
  laydate.render({
    elem: '#ID-laydate-type-time',
    type: 'time'
  });
  
  // 日期时间选择器
  laydate.render({
    elem: '#ID-laydate-type-datetime',
    type: 'datetime'
  });
  // 日期时间选择器 - 日期和时间选择器同时显示（全面板）
  laydate.render({
    elem: '#ID-laydate-type-datetime-1',
    type: 'datetime',
    fullPanel: true // 2.8+
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-range" lay-toc="{level: 2, hot: true}">范围选择</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <h5 style="margin-bottom: 16px;">
    左右面板<strong class="layui-font-red">独立</strong>选择模式（默认） :
  </h5>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期范围</label>
      <div class="layui-inline" id="ID-laydate-range">
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
        </div>
      </div>
    </div>
  </div>
  <h5 style="margin-bottom: 16px;">
    左右面板<strong class="layui-font-red">联动</strong>选择模式 <sup>2.8+</sup> :
  </h5>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期范围</label>
      <div class="layui-inline" id="ID-laydate-rangeLinked">
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期">
        </div>
      </div>
    </div>
  </div>
  <h5 style="margin-bottom: 16px;">其他类型的范围选择 :</h5>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">年范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-range-year" placeholder=" - ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">年月范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-range-month" placeholder=" - ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">时间范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-range-time" placeholder=" - ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期时间范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - ">
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 日期范围 - 左右面板独立选择模式
  laydate.render({
    elem: '#ID-laydate-range',
    range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
  });
  // 日期范围 - 左右面板联动选择模式
  laydate.render({
    elem: '#ID-laydate-rangeLinked',
    range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
    rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
  });
  
  // 年范围
  laydate.render({
    elem: '#ID-laydate-range-year',
    type: 'year',
    range: true
  });
  
  // 年月范围
  laydate.render({
    elem: '#ID-laydate-range-month',
    type: 'month',
    range: true
  });
  
  // 时间范围
  laydate.render({
    elem: '#ID-laydate-range-time',
    type: 'time',
    range: true
  });
  
  // 日期时间范围
  laydate.render({
    elem: '#ID-laydate-range-datetime',
    type: 'datetime',
    range: true
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-shortcut" lay-toc="{level: 2, hot: true}">配置快捷选项 <sup>2.8+</sup></h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-date">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">年份</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-year">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">年月</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-month">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-time">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-datetime">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期时间全面板</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-datetime-fullPanel">
      </div>
    </div>
    <hr>
    <div class="layui-inline">
      <label class="layui-form-label">日期范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-range-date" placeholder=" - ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">年份范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-range-year" placeholder=" - ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">年月范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-range-month" placeholder=" - ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">时间范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-shortcut-range-time" placeholder=" - ">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">日期时间范围</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" id="ID-laydate-shortcut-range-datetime" placeholder=" - ">
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  var util = layui.util;
  /*
   * 快捷选项
   */
  // 日期
  laydate.render({
    elem: "#ID-laydate-shortcut-date",
    shortcuts: [
      {
        text: "昨天",
        value: function(){
          var now = new Date();
          now.setDate(now.getDate() - 1);
          return now;
        }()
      },
      { text: "今天", value: Date.now() },
      {
        text: "明天",
        value: function(){
          var now = new Date();
          now.setDate(now.getDate() + 1);
          return now;
        }()
      },
      {
        text: "上个月",
        value: function(){
          var now = new Date();
          // now.setDate(now.getDate() - 1);
          now.setMonth(now.getMonth() - 1);
          return [now];
        }()
      },
      {
        text: "上个月的前一天",
        value: function(){
          var now = new Date();
          now.setMonth(now.getMonth() - 1);
          now.setDate(now.getDate() - 1);
          return [now];
        }()
      },
      {
        text: "某一天",
        value: "2016-10-14"
      }
    ]
  });
  // 年份
  laydate.render({
    elem: "#ID-laydate-shortcut-year",
    type: "year",
    shortcuts: [
      {
        text: "去年",
        value: function(){
          var now = new Date();
          now.setFullYear(now.getFullYear() - 1);
          return now;
        }()
      },
      {
        text: "明年",
        value: function(){
          var now = new Date();
          now.setFullYear(now.getFullYear() + 1);
          return now;
        }()
      }
    ]
  });
  // 年月
  laydate.render({
    elem: "#ID-laydate-shortcut-month",
    type: "month",
    shortcuts: [
      {
        text: "上个月",
        value: function(){
          var now = new Date();
          now.setMonth(now.getMonth() - 1);
          return now;
        }()
      },
      {
        text: "下个月",
        value: function(){
          var now = new Date();
          now.setMonth(now.getMonth() + 1);
          return now;
        }()
      },
      {
        text: "去年12月",
        value: function(){
          var now = new Date();
          now.setMonth(11);
          now.setFullYear(now.getFullYear() - 1);
          return now;
        }()
      }
    ]
  });
  // 时间
  laydate.render({
    elem: "#ID-laydate-shortcut-time",
    type: "time",
    shortcuts: function(){ // 生成 30 分钟间隔的时间列表
      var value = [];
      var now = new Date();
      now.setHours(0, 0, 0, 0);
      for (var i = 0; i < 48; i++) {
        var nowTemp = now.setMinutes(now.getMinutes() + (i ? 30 : 0));
        var nowTimeStr = util.toDateString(nowTemp, "HH:mm:ss");
        value.push({
          text: nowTimeStr,
          value: nowTimeStr
        });
      }
      return value;
    }()
  });
  // 日期时间
  laydate.render({
    elem: "#ID-laydate-shortcut-datetime",
    type: "datetime",
    shortcuts: [
      {
        text: "昨天",
        value: function(){
          var now = new Date();
          now.setDate(now.getDate() - 1);
          return now;
        }()
      },
      { text: "今天", value: Date.now() },
      {
        text: "明天",
        value: function(){
          var now = new Date();
          now.setDate(now.getDate() + 1);
          return now;
        }()
      },
      {
        text: "上个月",
        value: function(){
          var now = new Date();
          // now.setDate(now.getDate() - 1);
          now.setMonth(now.getMonth() - 1);
          return [now];
        }()
      },
      {
        text: "上个月的前一天",
        value: function(){
          var now = new Date();
          now.setMonth(now.getMonth() - 1);
          now.setDate(now.getDate() - 1);
          return [now];
        }()
      },
      {
        text: "某一天",
        value: "2016-10-14 00:00:00"
      }
    ]
  }); 
  // 日期时间全面板
  laydate.render({
    elem: "#ID-laydate-shortcut-datetime-fullPanel",
    type: "datetime",
    fullPanel: true,
    shortcuts: [
      {
        text: "昨天",
        value: function(){
          var now = new Date();
          now.setDate(now.getDate() - 1);
          return now;
        }()
      },
      { text: "今天", value: Date.now() },
      {
        text: "明天",
        value: function(){
          var now = new Date();
          now.setDate(now.getDate() + 1);
          return now;
        }()
      },
      {
        text: "上个月",
        value: function(){
          var now = new Date();
          // now.setDate(now.getDate() - 1);
          now.setMonth(now.getMonth() - 1);
          return [now];
        }()
      },
      {
        text: "上个月的前一天",
        value: function(){
          var now = new Date();
          now.setMonth(now.getMonth() - 1);
          now.setDate(now.getDate() - 1);
          return [now];
        }()
      },
      {
        text: "某一天",
        value: "2016-10-14 11:32:32"
      }
    ]
  });
  // 日期范围
  laydate.render({
    elem: "#ID-laydate-shortcut-range-date",
    range: true,
    shortcuts: [
      {
        text: "上个月",
        value: function(){
          var value = [];
          var date1 = new Date();
          date1.setMonth(date1.getMonth() - 1);
          date1.setDate(1);
          date1.setHours(0, 0, 0, 0);
          value.push(date1);
          var date2 = new Date();
          date2.setDate(1);
          date2.setHours(0, 0, 0, 0);
          date2 = date2.getTime() - 1;
          value.push(new Date(date2));
          return value;
        }()
      },
      {
        text: "这个月",
        value: function(){
          var value = [];
          var date1 = new Date();
          // date1.setMonth(date1.getMonth() - 1);
          date1.setDate(1);
          date1.setHours(0, 0, 0, 0);
          value.push(date1);
          var date2 = new Date();
          date2.setMonth(date2.getMonth() + 1);
          date2.setDate(1);
          date2.setHours(0, 0, 0, 0);
          date2 = date2.getTime() - 1;
          value.push(new Date(date2));
          return value;
        }()
      },
      {
        text: "下个月",
        value: function(){
          var value = [];
          var date1 = new Date();
          date1.setMonth(date1.getMonth() + 1);
          date1.setDate(1);
          date1.setHours(0, 0, 0, 0);
          value.push(date1);
          var date2 = new Date();
          date2.setMonth(date2.getMonth() + 2);
          date2.setDate(1);
          date2.setHours(0, 0, 0, 0);
          date2 = date2.getTime() - 1;
          value.push(new Date(date2));
          return value;
        }()
      }
    ]
  });
  // 年份范围
  laydate.render({
    elem: "#ID-laydate-shortcut-range-year",
    type: "year",
    range: true,
    shortcuts: [
      {
        text: "过去一年",
        value: function(){
          var now = new Date();
          now.setFullYear(now.getFullYear() - 1);
          return [now, new Date()];
        }()
      },
      {
        text: "未来一年",
        value: function(){
          var now = new Date();
          now.setFullYear(now.getFullYear() + 1);
          return [new Date(), now];
        }()
      },
      {
        text: "近三年",
        value: function(){
          var now = new Date();
          now.setFullYear(now.getFullYear() - 3);
          return [now, new Date()];
        }()
      }
    ]
  });
  // 年月范围
  laydate.render({
    elem: "#ID-laydate-shortcut-range-month",
    type: "month",
    range: true,
    shortcuts: [
      {
        text: "去年",
        value: function(){
          var date1 = new Date();
          date1.setFullYear(date1.getFullYear() - 1, 0, 1);
          date1.setHours(0, 0, 0, 0);
          var date2 = new Date();
          date2.setMonth(0, 1);
          date2.setHours(0, 0, 0, 0);
          return [date1, date2.getTime() - 1];
        }()
      },
      {
        text: "明年",
        value: function(){
          var now = new Date();
          now.setFullYear(now.getFullYear() + 1);
          return [now, now];
        }()
      },
      {
        text: "近三年",
        value: function(){
          var now = new Date();
          now.setFullYear(now.getFullYear() - 3);
          return [now, new Date()];
        }()
      }
    ]
  });
  // 时间范围
  laydate.render({
    elem: "#ID-laydate-shortcut-range-time",
    type: "time",
    range: true,
    shortcuts: [
      {
        text: '09:30 <p style="text-align: center;">到</p> 11:30',
        value: (function () {
          var date1 = new Date();
          date1.setHours(9, 0, 0, 0);
          var date2 = new Date();
          date2.setHours(11, 30, 0, 0);
          return [date1, date2];
        })()
      },
      {
        text: '13:00 <p style="text-align: center;">到</p> 15:00',
        value: (function () {
          var date1 = new Date();
          date1.setHours(13, 0, 0, 0);
          var date2 = new Date();
          date2.setHours(15, 0, 0, 0);
          return [date1, date2];
        })()
      }
    ]
  });
  // 日期时间范围
  laydate.render({
    elem: "#ID-laydate-shortcut-range-datetime",
    type: "datetime",
    range: true,
    shortcuts: [
      {
        text: "上个月",
        value: function(){
          var value = [];
          var date1 = new Date();
          date1.setMonth(date1.getMonth() - 1);
          date1.setDate(1);
          date1.setHours(0, 0, 0, 0);
          value.push(date1);
          var date2 = new Date();
          date2.setDate(1);
          date2.setHours(0, 0, 0, 0);
          date2 = date2.getTime() - 1;
          value.push(new Date(date2));
          return value;
        }()
      },
      {
        text: "这个月",
        value: function(){
          var value = [];
          var date1 = new Date();
          // date1.setMonth(date1.getMonth() - 1);
          date1.setDate(1);
          date1.setHours(0, 0, 0, 0);
          value.push(date1);
          var date2 = new Date();
          date2.setMonth(date2.getMonth() + 1);
          date2.setDate(1);
          date2.setHours(0, 0, 0, 0);
          date2 = date2.getTime() - 1;
          value.push(new Date(date2));
          return value;
        }()
      },
      {
        text: "下个月",
        value: function(){
          var value = [];
          var date1 = new Date();
          date1.setMonth(date1.getMonth() + 1);
          date1.setDate(1);
          date1.setHours(0, 0, 0, 0);
          value.push(date1);
          var date2 = new Date();
          date2.setMonth(date2.getMonth() + 2);
          date2.setDate(1);
          date2.setHours(0, 0, 0, 0);
          date2 = date2.getTime() - 1;
          value.push(new Date(date2));
          return value;
        }()
      }
    ]
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-format" lay-toc="{level: 2}">自定义格式</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">请选择日期</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-format-1" placeholder="yyyy年MM月dd日">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">请选择日期</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-format-2" placeholder="dd/MM/yyyy">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">请选择月份</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-format-3" placeholder="yyyyMMdd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">请选择时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-format-4" placeholder="H点m分">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">请选择范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-format-5" placeholder=" ~ ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">请选择范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-format-6" placeholder="开始 到 结束">
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 自定义格式
  laydate.render({
    elem: '#ID-laydate-format-1',
    format: 'yyyy年MM月dd日'
  });
  laydate.render({
    elem: '#ID-laydate-format-2',
    format: 'dd/MM/yyyy'
  });
  laydate.render({
    elem: '#ID-laydate-format-3',
    format: 'yyyyMMdd'
  });
  laydate.render({
    elem: '#ID-laydate-format-4',
    type: 'time',
    format: 'H点m分'
  });
  laydate.render({
    elem: '#ID-laydate-format-5',
    type: 'month',
    range: '~',
    format: 'yyyy-MM'
  });
  laydate.render({
    elem: '#ID-laydate-format-6',
    type: 'datetime',
    range: '到',
    format: 'yyyy年M月d日H时m分s秒'
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-mark" lay-toc="{level: 2}">节日及标注</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">开启公历节日</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-calendar" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">自定义日子</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-mark" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">节假日标注</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-holidays" placeholder="yyyy-MM-dd">
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 渲染
  //开启公历节日
  laydate.render({
    elem: '#ID-laydate-calendar',
    calendar: true
  });
  
  //自定义重要日子
  laydate.render({
    elem: '#ID-laydate-mark',
    mark: {
      '0-10-14': '生日',
      '0-12-31': '跨年', //每年的日期
      '0-0-10': '工资', //每月某天
      '0-0-15': '月中',
      '2017-8-15': '', //如果为空字符，则默认显示数字+徽章
      '2099-10-14': '呵呵'
    },
    done: function(value, date){
      // 点击每年的 10月14日，弹出提示语
      if(date.month === 10 && date.date === 14){ 
        layer.msg('这一天是：Layui 的生日');
      }
    }
  });
 
  // 节假日和补班日标注
  laydate.render({
    elem: '#ID-laydate-holidays',
    value: '2023-05-08',
    holidays: [ // v2.7.3 新增
      ['2022-12-31', '2023-1-1', '2023-1-2', '2023-1-21', '2023-1-22', '2023-1-23', '2023-1-24', '2023-1-25', '2023-1-26', '2023-1-27', '2023-4-5', '2023-4-29', '2023-4-30', '2023-5-1', '2023-5-2', '2023-5-3', '2023-6-22', '2023-6-23', '2023-6-24', '2023-9-29', '2023-9-30', '2023-10-1', '2023-10-2', '2023-10-3', '2023-10-4', '2023-10-5', '2023-10-6'],
      // 2023 年的补班日
      ['2023-1-28', '2023-1-29', '2023-4-23', '2023-5-6', '2023-6-25', '2023-10-7', '2023-10-8']
    ]
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-limit" lay-toc="{level: 2, hot: true}">限制可选日期</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">限定可选日期</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-limit-1" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">前后若干天可选</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-limit-2" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">限定可选时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-limit-3" placeholder="HH:mm:ss">
      </div>
      <div class="layui-form-mid layui-word-aux">
        这里以控制在 9:30-17:30 为例
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 限定可选日期
  var ins22 = laydate.render({
    elem: '#ID-laydate-limit-1',
    min: '2016-10-14',
    max: '2080-10-14',
    ready: function(){
      ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
    }
  });
  
  // 前后若干天可选，这里以前后 7 天为例
  laydate.render({
    elem: '#ID-laydate-limit-2',
    min: -7,
    max: 7
  });
  
  // 限定可选时间
  laydate.render({
    elem: '#ID-laydate-limit-3',
    type: 'time',
    min: '09:30:00',
    max: '17:30:00',
    btns: ['clear', 'confirm']
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-elem" lay-toc="{level: 2}">批量绑定元素</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <input type="text" class="layui-input demo-laydate-item" lay-options="{}" placeholder="yyyy-MM-dd">
    </div>
    <div class="layui-inline">
      <input type="text" class="layui-input demo-laydate-item" lay-options="{}" placeholder="yyyy-MM-dd">
    </div>
    <div class="layui-inline">
      <input type="text" class="layui-input demo-laydate-item" lay-options="{}" placeholder="yyyy-MM-dd">
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 渲染
  laydate.render({
    elem: '.demo-laydate-item'
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-more" lay-toc="{level: 2, hot: true}">更多功能示例</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  obj.render();
}}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">初始赋值</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-value" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">选中后的回调</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-done" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期切换的回调</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-change" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">不出现底部栏</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-bottom" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">只出现确定按钮</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-btns" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">自定义事件</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-trigger" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" id="ID-laydate-more-event-1">点我触发</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-event" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" id="ID-laydate-more-dblclick">双击我触发</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-dblclick-input" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期只读</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-readonly" readonly placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">非 input 元素</label>
      <div class="layui-input-inline">
        <div id="ID-laydate-more-div" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;"></div>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">开启遮罩</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-shade" readonly placeholder="yyyy-MM-dd">
      </div>
      <div class="layui-form-mid layui-text-em">
        <sup>2.8+</sup>
      </div>
    </div>
  </div>
</div>
<h5 style="margin-bottom: 15px; font-weight: 700;">
  覆盖实例与解除实例 <sup>2.8+</sup> : 
</h5>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <div class="layui-form-label" style="padding: 0; text-align: left;">
        <select lay-filter="filter-demo-laydate-reset">
          <option value="year">年份</option>
          <option value="month">月份</option>
          <option value="date" selected>日期</option>
          <option value="time">时间</option>
          <option value="other">解除</option>
        </select>
      </div>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-reset" autocomplete="off">
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  var form = layui.form;
  // 初始赋值
  laydate.render({
    elem: '#ID-laydate-more-value',
    value: '2016-10-14',
    isInitValue: true
  });
  
  // 选中后的回调
  laydate.render({
    elem: '#ID-laydate-more-done',
    done: function(value, date){
      layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
    }
  });
  
  // 日期切换的回调
  laydate.render({
    elem: '#ID-laydate-more-change',
    change: function(value, date){
      layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
    }
  });
  // 不出现底部栏
  laydate.render({
    elem: '#ID-laydate-more-bottom',
    showBottom: false
  });
  
  // 只出现确定按钮
  laydate.render({
    elem: '#ID-laydate-more-btns',
    btns: ['confirm']
  });
  
  // 自定义事件
  laydate.render({
    elem: '#ID-laydate-more-trigger',
    trigger: 'mousedown'
  });
  
  // 点我触发
  laydate.render({
    elem: '#ID-laydate-more-event',
    eventElem: '#ID-laydate-more-event-1',
    trigger: 'click'
  });
  
  // 双击我触发
  lay('#ID-laydate-more-dblclick').on('dblclick', function(){
    laydate.render({
      elem: '#ID-laydate-more-dblclick-input',
      show: true,
      closeStop: '#ID-laydate-more-dblclick',
    });
  });
  
  // 日期只读
  laydate.render({
    elem: '#ID-laydate-more-readonly',
    trigger: 'click',
  });
  
  // 非 input 元素
  laydate.render({
    elem: '#ID-laydate-more-div'
  });
  // 开启遮罩
  laydate.render({
    elem: '#ID-laydate-more-shade',
    triggdestroyer: 'click',
    shade: 0.8 // 遮罩透明度 --- 2.8+
  });
  // 覆盖实例与销毁实例
  var inst = laydate.render({
    elem: '#ID-laydate-more-reset'
  });
  form.on("select(filter-demo-laydate-reset)", function (obj) {
    var value = obj.value;
    var options = inst.config;
    var elem = options.elem[0];
    if (value === "other") {
      laydate.unbind(options.id); // 解绑实例 --- 2.8+
      elem.focus();
    } else {
      // 覆盖渲染
      laydate.render({
        elem: elem,
        type: value,
        show: true // 渲染即显示
      });
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-theme" lay-toc="{level: 2, hot: true}">自定义主题</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">墨绿主题</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-theme-molv" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">自定义颜色主题</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-theme-color" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">格子主题</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-theme-grid" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <!--<div class="layui-inline">
      <label class="layui-form-label">圆圈高亮主题</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-theme-circle" placeholder="yyyy-MM-dd">
      </div>
    </div>-->
    <div class="layui-inline">
      <label class="layui-form-label">混合主题</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-theme-multi" placeholder="yyyy-MM-dd">
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 墨绿主题
  laydate.render({
    elem: '#ID-laydate-theme-molv',
    theme: 'molv'
  });
  
  // 自定义颜色
  laydate.render({
    elem: '#ID-laydate-theme-color',
    theme: '#FF5722'
  });
  
  // 格子主题
  laydate.render({
    elem: '#ID-laydate-theme-grid',
    theme: 'grid'
  });
  // 圆圈高亮主题
  /*
  laydate.render({
    elem: '#ID-laydate-theme-circle',
    theme: 'circle' // 2.8+新增主题
  });
  */
  // 混合主题
  laydate.render({
    elem: '#ID-laydate-theme-multi',
    theme: ['molv', 'grid'] // 2.8+ 新增功能
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-static" lay-toc="{level: 2}">直接静态显示</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="ws-demo-static">
  <div class="layui-inline" id="ID-laydate-static-1"></div>
  <div class="layui-inline" id="ID-laydate-static-2"></div>
  <div class="layui-inline" id="ID-laydate-static-3"></div>
  <div class="layui-inline" id="ID-laydate-static-4"></div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 直接嵌套显示
  laydate.render({
    elem: '#ID-laydate-static-1',
    position: 'static'
  });
  laydate.render({
    elem: '#ID-laydate-static-2',
    position: 'static',
    lang: 'en'
  });
  laydate.render({
    elem: '#ID-laydate-static-3',
    type: 'month',
    position: 'static'
  });
  laydate.render({
    elem: '#ID-laydate-static-4',
    type: 'time',
    position: 'static'
  });
});
</script>
  </textarea>
</pre>
</div>
<p></p>
<h2 id="api" lay-toc="{hot: true, bold: true}">API</h2>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var laydate = layui.laydate</td>
<td>获得 <code>laydate</code> 模块。</td>
</tr>
<tr>
<td><a href="index.html#render">laydate.render(options)</a></td>
<td>laydate 组件渲染，核心方法。</td>
</tr>
<tr>
<td><a href="index.html#hint">laydate.hint(id, opts)</a> <sup>2.8+</sup></td>
<td>在对应的 laydate 组件面板上弹出提示层。</td>
</tr>
<tr>
<td><a href="index.html#getInst">laydate.getInst(id)</a> <sup>2.8+</sup></td>
<td>获取组件对应的渲染实例。</td>
</tr>
<tr>
<td><a href="index.html#close">laydate.unbind(id)</a> <sup>2.8+</sup></td>
<td>对目标元素解除当前实例的绑定。</td>
</tr>
<tr>
<td><a href="index.html#close">laydate.close(id)</a> <sup>2.7+</sup></td>
<td>关闭日期面板。</td>
</tr>
<tr>
<td><a href="index.html#getEndDate">laydate.getEndDate(month, year)</a></td>
<td>获取某月的最后一天。</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
<p><code>laydate.render(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a>
<br>注 <sup>2.8+</sup> : 除 <code>elem</code> 属性外，其他基础属性也可以直接写在元素的 <code>lay-options=&quot;{}&quot;</code> 属性中。</li>
</ul>
<pre><code class="layui-code">&lt;input type=&quot;text&quot; id=&quot;ID-test-laydate&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;class-test-laydate&quot; lay-options=&quot;{value: '2016-10-14'}&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;class-test-laydate&quot; lay-options=&quot;{value: '2017-08-21'}&quot;&gt;
 
&lt;!-- import layui --&gt; 
&lt;script&gt;
layui.use(function(){
  var laydate = layui.laydate;
  // 单个渲染
  laydate.render({
    elem: '#ID-test-laydate'
  });
  // 批量渲染
  laydate.render({
    elem: '.class-test-laydate'
  });
});
&lt;/script&gt;
</code></pre>
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>elem</td>
<td>
<p>绑定元素选择器或 DOM 对象</p>
</td>
<td>string/DOM</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.type">type</a></p>
</td>
<td>
<div id="options.type" lay-pid="options" class="ws-anchor">
  组件面板选择类型。支持以下可选值：
</div>
<ul>
<li><code>year</code> 年选择器，只提供年列表选择</li>
<li><code>month</code> 年月选择器，只提供年、月选择</li>
<li><code>date</code> 日期选择器（默认），可选择：年、月、日选择</li>
<li><code>time</code> 时间选择器，只提供时、分、秒选择</li>
<li><code>datetime</code> 日期时间选择器，可选择：年月日、时分秒</li>
</ul>
<p>效果详见： <a href="index.html#demo-type">#示例</a></p>
</td>
<td>string</td>
<td>
<p><code>date</code></p>
</td>
    </tr>
    <tr>
      <td>id</td>
<td>
<p>设定实例唯一索引，以便用于其他方法对例进行相关操作。若该属性未设置，则默认从 <code>elem</code> 属性绑定的元素中的 <code>id</code> 属性值中获取。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.range">range</a></p>
</td>
<td>
<div id="options.range" lay-pid="options" class="ws-anchor">
<p>开启左右面板的范围选择，将会根据 <code>type</code> 类型呈现对应的范围选择面板。该属性值支持以下类型：</p>
</div>  
<ul>
<li>若为 <code>boolean</code> 类型，即表示是否开启范围选择，若设为 <code>true</code>，则开始日期与结束日期默认采用 <code>-</code> 连接符</li>
<li>若为 <code>string</code> 类型，则表示开启范围选择，且自定义开始日期与结束日期的连接符。如： <code>range: '~'</code></li>
<li>若为 <code>boolean</code> 类型，即表示开启范围选，且开始日期和结束日期分别赋值在两个目标选择器中，如：</li>
</ul>
<pre><code class="layui-code">range: ['#start', '#end']
</code></pre>
<p>详细用法可参考： <a href="index.html#demo-range">#示例</a></p>
</td>
<td>boolean<br>string<br>array</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>rangeLinked <sup>2.8+</sup></td>
<td>
<p>是否开启日期范围选择时的区间联动标注模式，该模式必须开启 <code>range</code> 属性才能生效。日期范围默认采用的是<em class="layui-text-em">左右面板独立选择模式</em>，设置该属性后，将采用<em class="layui-text-em">左右面板联动选择模式</em>。
<br>效果详见： <a href="index.html#demo-range">#示例</a></p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>fullPanel <sup>2.8+</sup></td>
<td>
<p>是否开启全面板，即日期和时间显示在同一面板。 当 <code>type: 'datetime'</code> 且未设置 <code>range</code> 属性时生效。
<br>效果详见： <a href="index.html#demo-type">#示例</a></p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.format">format</a></p>
</td>
<td colspan="3">
<div id="options.format" lay-pid="options" class="ws-anchor">
<p>自定义日期和时间值的返回格式,默认值： <code>yyyy-MM-dd</code>。 其格式符规则如下：</p>
</div> 
<table class="layui-table">
<thead>
<tr>
<th>格式符</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>yyyy</td>
<td>年份，输出四个字符。若不足四位，则前置补零</td>
</tr>
<tr>
<td>y</td>
<td>年份，允许一位</td>
</tr>
<tr>
<td>MM</td>
<td>月份，输出两个字符。若不足两位，则前置补零</td>
</tr>
<tr>
<td>M</td>
<td>月份，允许一位</td>
</tr>
<tr>
<td>dd</td>
<td>日期，输出两个字符。若不足两位，则前置补零</td>
</tr>
<tr>
<td>d</td>
<td>日期，允许一位</td>
</tr>
<tr>
<td>HH</td>
<td>小时，输出两个字符。若不足两位，则前面补零</td>
</tr>
<tr>
<td>H</td>
<td>小时，允许一位</td>
</tr>
<tr>
<td>mm</td>
<td>分钟，输出两个字符。若不足两位，则前面补零</td>
</tr>
<tr>
<td>m</td>
<td>分钟，允许一位</td>
</tr>
<tr>
<td>ss</td>
<td>秒数，输出两个字符。若不足两位，则前面补零</td>
</tr>
<tr>
<td>s</td>
<td>秒数，允许一位</td>
</tr>
</tbody>
</table class="layui-table">
<p>通过上述格式符组成日期时间字符串，如下所示：</p>
<pre><code class="layui-code">// 返回值示例： 2008-08-08 20:08:08
format: 'yyyy-MM-dd HH:mm:ss'
 
// 返回值示例： 北京时间 6 点 30 分
format: '北京时间 H 点 m 分'
</code></pre>
<p>相关用法可参考： <a href="index.html#demo-format">#示例</a></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.value">value</a></p>
</td>
<td>
<div id="options.value" lay-pid="options" class="ws-anchor">
初始值。值支持以下类型：
</div> 
<ul>
<li>若为 <code>string</code> 类型，则必须和 <code>format</code> 属性格式对应</li>
</ul>
<pre><code class="layui-code">value: '2018-08-18'
</code></pre>
<ul>
<li>若为 <code>date</code> 对象类型，则可直接赋值 <code>new Date()</code></li>
</ul>
<pre><code class="layui-code">value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的毫秒数
</code></pre>
<ul>
<li>当开启 <code>range</code> 时，初始设置日期范围值</li>
</ul>
<pre><code class="layui-code"> // 开始日期 - 结束日期
value: '1900-01-01 - 2100-01-01'
</code></pre>
</td>
<td>string<br>date</td>
<td>
<p><code>new Date()</code></p>
</td>
    </tr>
    <tr>
<td>isInitValue</td>
<td>
<p>是否将初始值填充在目标元素中，一般配合 <code>value</code> 属性使用</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.shortcuts">shortcuts</a> <sup>2.8+</sup></p>
</td>
<td>
<div id="options.shortcuts" lay-pid="options" class="ws-anchor">
用于开启面板左侧的快捷选择栏。其值配置规则如下：
</div> 
<pre><code class="layui-code">shortcuts: [
  {
    text: &quot;快捷选项文本&quot;,
    value: '快捷选项值'
  },
  // 更多选项 …
]
</code></pre>
<p>其中 <code>value</code> 支持以下类型：</p>
<ul>
<li>若为 <code>string</code> 类型，必须和 <code>format</code> 设置的格式对应；</li>
<li>若为 <code>date</code> 对象类型，则可通过操作 <code>new Date()</code> 来对选项值进行相应的返回计算；</li>
<li>若为 <code>array</code> 类型，则数组成员可填写开始日期和结束日期。</li>
</ul>
<p>详细用法可参考： <a href="index.html#demo-shortcut">#示例</a></p>
</td>
<td>string<br>date<br>array</td>
<td>-</td>
    </tr>
    <tr>
<td>weekStart <sup>2.7+</sup></td>
<td>
<p>设置起始周。 支持 0-6 的数字，<code>0</code> 即代表从周日开始。</p>
<pre><code class="layui-code">weekStart: 1 // 设置周一为起始周
</code></pre>
</td>
<td>number</td>
<td>
<p><code>0</code></p>
</td>
    </tr>
    <tr>
<td>isPreview</td>
<td>
<p>用于是否在面板左下角显示当前结果的预览。当 <code>type:datetime</code> 时强制为 <code>false</code>。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.minmax">min / max</a></p>
</td>
<td colspan="3">
<div id="options.min" lay-pid="options" class="ws-anchor">
<p>限制可供选择的最小或最大日期时间值。默认值：</p>
<ul>
<li><code>min: '1900-1-1'</code></li>
<li><code>max: '2099-12-31'</code></li>
</ul>
</div>   
<p>属性值支持以下可选类型：</p>
<ul>
<li>若值为字符类型，则：年月日必须用 <code>-</code> 连接，且时分秒必须用 <code>:</code> 连接。 此处无需遵循 <code>format</code> 设定的格式；</li>
<li>若值为整数类型，且数字 ＜ 86400000，则数字代表天数，如： <code>min: -7</code> 即代表最小日期在 7 天前，正数代表若干天后；</li>
<li>若值为整数类型，且数字 ≥ 86400000，则数字代表毫秒数，如：<code>max: 4073558400000</code> 即代表最大日期在公元 3000年1月1日。</li>
</ul>
<p>示例：</p>
<pre><code class="layui-code">min: '2017-1-1 00:00:00' // 最小日期时间值
min: -7 // 最小日期为 7 天前
max: 7 // 最大日期为 7 天后
</code></pre>
<p>相关效果可参考： <a href="index.html#demo-limit">#示例</a></p>
</td>
    </tr>
    <tr>
<td>trigger</td>
<td>
<p>自定义弹出组件面板的事件</p>
</td>
<td>string</td>
<td>
<p><code>click</code></p>
</td>
    </tr>
    <tr>
<td>show</td>
<td>
<p>是否在渲染时默认显示组件面板。组件在执行渲染时，默认需通过触发目标元素的事件，方可显示组件面板，而该属性可跳过目标元素的事件，直接显示组件面板。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>position</td>
<td>
<p>设置组件面板的定位方式。支持以下可选值：</p>
<ul>
<li><code>absolute</code>  绝对定位，始终吸附在绑定元素周围。</li>
<li><code>fixed</code> 固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。</li>
<li><code>static</code> 静态定位，控件将直接嵌套显示在指定容器中。用法详见：<a href="index.html#demo-static">#示例</a></li>
</ul>
</td>
<td>string</td>
<td>
<p><code>absolute</code></p>
</td>
    </tr>
    <tr>
<td>zIndex</td>
<td>
<p>设置组件面板的层叠顺序。一般用于解决与其它元素的互相被遮掩的问题。若 <code>position: 'static'</code> 时，则该属性无效。</p>
</td>
<td>number</td>
<td>
<p><code>99999999</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.shade">shade</a> <sup>2.8+</sup></td></p>
<td>
<div id="options.shade" lay-pid="options" class="ws-anchor"> 
用于开启弹出日期面板时的遮罩。值支持以下可选类型：
</div>
<ul>
<li>若为 <code>number</code> 类型，则表示遮罩透明度。如：</li>
</ul>
<pre><code class="layui-code">shade: 0.5
</code></pre>
<ul>
<li>若为 <code>array</code> 类型，则可设置遮罩颜色和透明度，如：</li>
</ul>
<pre><code class="layui-code">shade: [0.5, '#000'] // 遮罩的透明度和背景色
</code></pre>
<p>效果详见： <a href="index.html#demo-more">#示例</a></p>
</td>
<td>number<br>array</td>
<td>-</td>
    </tr>
    <tr>
<td>showBottom</td>
<td>
<p>是否显示组件面板的底部栏</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>btns</td>
<td>
<p>自定义排版组件面板底部栏中的按钮，按钮将按照数组顺序排列。内置按钮名称：<code>clear,now,confirm</code> 。</p>
<pre><code class="layui-code"> // 显示清空、确认按钮
btns: ['clear', 'confirm']
</code></pre>
</td>
<td>array</td>
<td>-</td>
    </tr>
    <tr>
<td>autoConfirm <sup>2.8+</sup></td>
<td>
<p>是否在选中目标值时即自动确认。
<br>当开启 <code>range</code> 属性时，该属性无效。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>lang</td>
<td>
<p>设置组件的语言版本。可选值如下：</p>
<ul>
<li><code>cn</code> 中文版</li>
<li><code>en</code> 英文版</li>
</ul>
</td>
<td>string</td>
<td>
<p><code>cn</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.theme">theme</a></p>
</td>
<td>
<div id="options.theme" lay-pid="options" class="ws-anchor">
<p>设置组件面板主题。除了默认主题，还内置主题： <code>molv</code> <code>grid</code> <code>circle</code><sup>2.8+</sup> ，且支持直接传入自定义的主题色。</p>
</div> 
<pre><code class="layui-code">theme: '#FF5722'
</code></pre>
<p>注 <sup>2.8+</sup> : 多个主题可用数组格式，如：</p>
<pre><code class="layui-code">theme: ['grid', '#FF5722']
</code></pre>
<p>若第 1 个成员为 hex 格式的主色值，则第 2 个成员为辅色值</p>
<pre><code class="layui-code">// 主色、辅色 --- 2.8.4 新增
theme: ['#16baaa', '#16b777']
</code></pre>
<p>效果及用法详见： <a href="index.html#demo-theme">#示例</a></p>
</td>
<td>string<br>array</td>
<td>-</td>
    </tr>
    <tr>
<td>calendar</td>
<td>
<p>是否显示我国常见的公历节日。当 <code>lang: 'en'</code> 时无效。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.mark">mark</a></p>
</td>
<td>
<div id="options.mark" lay-pid="options" class="ws-anchor">
<p>自定义日期标记。该属性是对 <code>calendar</code> 属性的进一步延伸，灵活度更高。属性可批量设置多个日期标记，如：</p>
</div>
<pre><code class="layui-code">mark: {
  '0-10-14': '生日', //每年每月的某一天
  '0-0-10': '工资', // 每月 10 号
  '2008-8-8': '开幕', // 指定的日期
}
</code></pre>
<p>前缀 <code>0-</code> 即代表每年，<code>0-0-</code> 即代表每年每月。</p>
<p>效果详见： <a href="index.html#demo-mark">#示例</a></p>
</td>
<td>object</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.holidays">holidays</a> <sup>2.7+</sup></p>
</td>
<td>
<div id="options.holidays" class="ws-anchor">
用于标注节假日及补班日。值是一个二维数组，如：
</div>
<pre><code class="layui-code">holidays: [
  // 2023 年的节假日
  ['2023-1-1','2023-1-2','2023-1-3'],
  // 2023 年的补班日
  ['2023-1-28','2023-1-29']
]
</code></pre>
<p>相关日期值可详细参考国家每年公布的法定节假日安排</p>
<p>效果详见： <a href="index.html#demo-mark">#示例</a></p>
</td>
<td>array</td>
<td>-</td>
    </tr>
    <tr>
    <td colspan="4" style="text-align: center"> 
<div id="options.callback" lay-pid="options" class="ws-anchor">
<p><a href="index.html#options.callback">回调函数</a></p>
</div>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.ready">ready</a></p>
</td>
<td colspan="3">
<div id="options.ready" lay-pid="options" class="ws-anchor">
组件面板初始打开的回调函数。返回的参数如下：
</div>
<pre><code class="layui-code">ready: function(date){
  /* 得到初始的日期时间对象，date 参数格式如下：
    {
      year: 2017, // 年
      month: 8, // 月
      date: 18, // 日 
      hours: 0, // 时 
      minutes: 0, // 分 
      seconds: 0 // 秒
    }
  */
  console.log(date);
}
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.change">change</a></p>
</td>
<td colspan="3">
<div id="options.change" lay-pid="options" class="ws-anchor">
日期时间被切换后的回调函数。返回的参数如下：
</div>
<pre><code class="layui-code">change: function(value, date, endDate){
  console.log(value); // 日期字符，如： 2017-08-18
  console.log(date); // 包含年月日时分秒各项值的对象
  console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。
}
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.done">done</a></p>
</td>
<td colspan="3">
<div id="options.done" lay-pid="options" class="ws-anchor">
日期时间选择完毕的回调函数，点击清空、现在、确定也均会触发。返回的参数如下：
</div>
<pre><code class="layui-code">done: function(value, date, endDate){
  console.log(value); // 日期字符，如： 2017-08-18
  console.log(date); // 包含年月日时分秒各项值的对象
  console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。
}
</code></pre>
</td>
    </tr>
    <tr>
<td>onConfirm <sup>2.8+</sup></td>
<td colspan="3">
<p>点击底部栏「确定」按钮时的回调函数。返回的参数同 <code>done</code>。</p>
</td>
    </tr>
    <tr>
<td>onNow <sup>2.8+</sup></td>
<td colspan="3">
<p>点击底部栏「现在」按钮时的回调函数。返回的参数同 <code>done</code>。</p>
</td>
    </tr>
    <tr>
<td>onClear <sup>2.8+</sup></td>
<td colspan="3">
<p>点击底部栏「清空」按钮时的回调函数。返回的参数同 <code>done</code>。</p>
</td>
    </tr>
    <tr>
<td>close <sup>2.7+</sup></td>
<td colspan="3">
<p>组件面板被关闭（移除）后的回调函数。无返回参数。</p>
</td>
    </tr>
  </tbody>
</table>
</div>
<h3 id="hint" lay-pid="api" class="ws-anchor ws-bold">弹出提示 <sup>2.8+</sup></h3>
<p><code>laydate.hint(id, opts);</code></p>
<ul>
<li>参数 <code>id</code> : 组件渲染时定义的 <code>id</code> 属性值</li>
<li>参数 <code>opts</code> : 该方法支持的属性可选项，详见下表</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>opts</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td>提示内容</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>ms</td>
<td>提示层自动消失所需的毫秒数</td>
<td>number</td>
<td>3000</td>
</tr>
</tbody>
</table class="layui-table">
<p>该方法用于在指定的日期面板弹出一个提示层。</p>
<pre><code class="layui-code">var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 弹出提示
laydate.hint('test', {
  content: '提示内容'
});
</code></pre>
<h3 id="getInst" lay-pid="api" class="ws-anchor ws-bold">获取实例  <sup>2.8+</sup></h3>
<p><code>laydate.getInst(id);</code></p>
<ul>
<li>参数 <code>id</code> : 组件渲染时定义的 <code>id</code> 属性值</li>
</ul>
<p>该方法用于获取 laydate 对应 id 的渲染实例，以获得该实例对应的成员属性。</p>
<pre><code class="layui-code">var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 获取对应的实例
var inst = laydate.getInst('test');
console.log(inst); // 实例对象
</code></pre>
<h3 id="unbind" lay-pid="api" class="ws-anchor ws-bold">解除实例绑定 <sup>2.8+</sup></h3>
<p><code>laydate.unbind(id);</code></p>
<ul>
<li>参数 <code>id</code> : 组件渲染时定义的 <code>id</code> 属性值</li>
</ul>
<p>该方法用于对目标元素对应的实例的绑定完全解除，即触发元素事件时，不再执行组件渲染。</p>
<pre><code class="layui-code">var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 解除对应的实例绑定
laydate.unbind('test');
</code></pre>
<h3 id="close" lay-pid="api" class="ws-anchor ws-bold">关闭日期面板 <sup>2.7+</sup></h3>
<p><code>laydate.close(id);</code></p>
<ul>
<li>参数 <code>id</code> : 组件渲染时定义的 <code>id</code> 属性值。 若 <code>id</code> 参数不填，则关闭当前打开的日期面板</li>
</ul>
<p>该方法用于关闭对应的日期面板</p>
<pre><code class="layui-code">var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 关闭对应的日期面板
laydate.cllose('test');
</code></pre>
<h3 id="getEndDate" lay-pid="api" class="ws-anchor ws-bold">获取某月的最后一天</h3>
<p><code>laydate.getEndDate(month, year);</code></p>
<ul>
<li>参数 <code>month</code> : 月份，默认为当前月。</li>
<li>参数 <code>year</code> : 年份，默认为今年。</li>
</ul>
<p>该方法用于获取某个月份的最后一天</p>
<pre><code class="layui-code">var days1 = laydate.getEndDate(10); // 获得 10 月的最后一天为 31 号
var days2 = laydate.getEndDate(2, 2080); // 获得 2080 年 2 月的最后一天为 29 号
</code></pre>
<h2>贴士</h2>
<blockquote class="layui-elem-quote">
<p>laydate 曾经可作为单独组件使用，鉴于维护成本的考量，目前 laydate 组件已完全集成到 Layui 中，而单独版本已不做同步维护。
因此，建议直接使用 layui 中 laydate 即可。</p>
</blockquote class="layui-elem-quote">

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/laydate/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>